<template>
    <div>
        <div style="background-color: #E4E7ED">
            <div style="padding-left:200px;padding-top:50px;padding-right:200px">
                <el-row style="padding-right:200px">
                    <el-col :span="8">
                        <div class="demo-image" style="padding-left:50%">
                            <img src="@/assets/warren_market.png" style="width: 240px; height: 180px">
                        </div>
                    </el-col>
                    <el-col :span="8" style="padding-top:4%">
                        <div class="demo-input-suffix" style="padding-left:50px">
                            <el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="input" style="width:600px">
                                <el-button slot="append" icon="el-icon-search" @click="handleClick"></el-button> <!--将文本内容输出到data里的input中 这个button绑定方法获取input数据进行axios-->
                            </el-input>
                        </div>
                    </el-col>
                </el-row >
                <el-row :gutter="20" style="background-color:#FFFFFF">
                    <el-col :span="6" v-for="product in tableData" :key="product" style="padding-left:50px">
                        <div class="grid-content bg-purple" style="padding-top:20px">
                            <router-link :to="'/detail?category='+product.category+'&id='+product.id" style="color:black">
                                <img :src="require('@/assets/'+product.category+'/'+product.id+'/1.jpg')" style="width: 200px; height: 200px"><br>
                                <p style="width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:15px">{{product.title}}</p>
                                <el-row :gutter="20" style="padding-top:10px">
                                    <el-col :span="6"><div class="grid-content bg-purple"><p style="color:#D69C1F">￥{{product.price}}</p></div></el-col>
                                    <el-col :span="18"><div class="grid-content bg-purple"><p style="padding-left:10px">{{product.buyer}}人购买</p></div></el-col>
                                </el-row>
                            </router-link>
                        </div>
                    </el-col>
                </el-row>
                    <div class="block" style="padding-top:20px;padding-left:860px">
                        <el-pagination
                        @current-change="handleCurrentChange"
                        :page-size="10"
                        layout="prev, pager, next, jumper"
                        :total=total>
                        </el-pagination>
                    </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "productsshop",
    data(){
        return{
            input: '',
            tableData: [],
            total : 100
        }
    },
    methods: {
      handleCurrentChange(val) {
        this.$axios.get("/api/getShowByLike?title="+this.$route.query.title+"&page="+val).then(res=>{
            this.tableData = res.data
        });
      },
      handleClick() {
        this.$router.push("/productsshow?title="+this.input);
        window.location.reload()
      }
    },
    mounted(){
        this.$axios.get("/api/getShowByLike?title="+this.$route.query.title+"&page=1").then(res=>{
            this.tableData = res.data
        });
        this.$axios.get("/api/getCountLike?title="+this.$route.query.title).then(res=>{
            this.total = res.data
        });
    }
}
</script>

<style scoped>
</style>